@font-face {
    font-family: 'FontAwesome';
    src: url('../font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  .card-modal {
      z-index: 1050;
      margin-top: 10rem;
  }
  
  .card-modal .card-body:before {
      display: block;
      float: left;
      font-size: 3rem;
      margin-right: 1rem;
      font-family: "FontAwesome";
      font-weight: 900;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
  }
  
  .card-modal .card-body-info:before {
      content: "\f05a";
      color: #007bff;
  }
  
  .card-modal .card-body-alerta:before {
      content: "\f06a";
      color: #ffc107;
  }
  
  .card-modal .card-body-error:before {
      content: "\f057";
      color: #dc3545;
  }
  
  .card-modal .card-body-confirmacion:before {
      content: "\f059";
      color: #007bff;
  }
  
  .card-modal .card-body-progreso:before {
      content: "\f1ce";
      /* color: #17a2b8; // CELESTE */
      color: #007bff; /* AZUL BG-PRIMARY */
      animation: animationRotation 1.5s infinite linear;
      transform-origin: 50% 50%;
  }
  
  @keyframes animationRotation {
      from {
          transform: rotate(0deg);
      }
      to {
          transform: rotate(359deg);
      }
  }